<template>
	<view>
		<view class="top_box">
				<view class="top_box1">
					<view class = "top_word" style="font-size: 18px; "><b>监督占座</b></view>
					<view class = "top_word">提交清晰的证据以释放被占空位</view>
				</view>
				
				<view class="top_img_box">
					<image class="top_img" src="https://xinguan-parent2.oss-cn-hangzhou.aliyuncs.com/other/index_03.png" style="padding-top: 21px;"></image>
				</view>
				
					
		</view>
		<view>
			<u-notice-bar :text="text1" mode="closable"></u-notice-bar>
		</view>
		<view class="second_box">
			<view class="second_box_left">
				<view style="color: #152E9D;">小图</view>
				<view style="color: #ff5500;">提示</view>
			</view>
			<view class="second_box_banner">
				
				请注意：如果在座位有人时发起监督，您将面临被投诉甚至进入黑名单的风险。
			</view>
			<view class="second_box_img">
				<u-icon name="🧐" size="26" top="8"></u-icon>
			</view>
		</view>
		
		<view class="thrid_box">
			<view style="font-size: 18px;"><b>监督信息</b></view>
			<view>输入座位号以查询</view>
		</view>
		
		<view class="forth_box">
			<view class="xz">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
						<view style="padding: 20rpx;background-color: white;"  class="cg1">
							<view class="cg2">
								<u-icon name="map-fill"></u-icon>
								{{ array[index].name }}
							</view>
							<view>
								<u-icon name="arrow-right" size="10" top="8"></u-icon>
							</view>
							
						</view>
						
					</picker>
			</view>
			<view class="zwh">
				<u-icon name="edit-pen-fill"></u-icon>
				<input type="text" placeholder="填写要监督的座位号" class="tx1" style="width:100%;" />	
			</view>
			<view style="font-size: 10px; padding-top: 2px;">
				*需与系统编号一致（如001，填写01或1视为无效）
			</view>
		</view>
		
		<view class="fifth_box">
			<view style="font-weight: 700; font-size: 16px; color: #825640;">
				上传照片（必填）
				<view style="font-size: 10px; color: #d9d9d9;">
				须含有清晰的座位号，以便审核处理
				</view>
				<view class="zp">
					<u-upload
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="10"
						height="100px"
						width="100px"
					></u-upload>
				</view>
			</view>
		</view>
		
		<view class="final_box">
			<view style="padding-bottom: 5px;">
				<u-button text="此座无人且我想使用" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			</view>
			<view style="padding-top: 5px;">
				<u-button text="此座无人" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
		export default {
			data() {
				return {
					show: false,
					// defaultIndex ='',
					array: [{ name: '选择场馆' }, { name: '先锋' }, { name: '软件' }, { name: '严正兴' }],
					index: 0,
					text1: '请谨慎使用监督,对自己与他人负责'
				}
			},
			mounted() {
			
			},methods:{
				confirm(){
					this.show = false;
					
					
				},
				setIndexs(index){
					console.log(index);
				},
				bindPickerChange: function(e) {
							this.index = e.detail.value;
						}
			}
		}
</script>

<style>		
	.zp {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-content: flex-start;
	}		
			
	.cg1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.cg2 {
		display: flex;
	}
	u-icon,input{
		display: inline-block;
	}
	.top_box {
		background: linear-gradient(to right, rgb(254, 244, 195),rgb(254,244,235));
		height: 120px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.top_img {
		width: 80px;
		height: 80px;
		opacity:0.2;
	}
	
	.top_box1 {
		padding: 20px 0 ;
		display: flex;
		flex-direction: column;
		align-content: center;
		
	}
	
	.top_word {
		padding-left: 20px;
	}

	.second_box {
		width: 90%;
		background-color: #ffffff;
		margin: 0px auto;
		box-shadow: 0px 2px 15px #cbcbcb ;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border:2px;
		border-radius:10px;
	}
	
	.second_box_left {
		padding:20px 0 ;
		padding-left: 20px;
		display: flex;
		flex-direction: column;
		align-content: center;
		font-family: Cursive;
		font-weight: 700;
	}
	
	.second_box_banner {
		font-size: 12px;
		width: 65%;
		padding:25px 0 ;
		display: flex;
		flex-direction: column;
		align-content: center;
	}
	
	.second_box_img {
		padding:25px 0 ;
		display: flex;
		flex-direction: column;
		align-content: center;
	}
	
	.thrid_box {
		text-align: center;
		width: 120px;
		margin: 10px auto;
	}
	
	.forth_box {
		width: 90%;
		margin: 5px auto;
	}
	
	
	.xzcg {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.xz {
		box-shadow: 0px 2px 15px #cbcbcb ;
		margin-bottom: 15px;
	}
	
	.xz1 {
		display: flex;
		flex-direction: row;
		align-items:center;
	}
	
	.zwh {
		padding: 8px;
		margin-top: 10px;
		box-shadow: 0px 2px 15px #cbcbcb ;
		height: 25px;
		display: flex;
		flex-direction: row;
	}
	
	
	.fifth_box {
		width: 90%;
		margin: 5px auto;
	}
	
	.final_box {
		width: 90%;
		margin: 5px auto;
		padding-top: 10px;
		padding-bottom: 15px;
	}
	
</style>
